<template>
  <div class="home">
    <!-- <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <!-- 简单的函数调用 -->
    <h1>{{filTime(time)}}</h1>
    <h1>{{filterTime(time)}}</h1>
    <h1>{{num}}</h1>
    <button @click="num++">num++</button>
  </div>
</template>
<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import {ref,reactive,toRefs,watch,watchEffect} from 'vue'
import dayjs from 'dayjs'
import {filterTime} from '../time.js'
export default {
  name: 'HomeView',
  setup(props) {
    const num = ref(10)
    const data = reactive({
        time:new Date().getTime(),
        obj:{
            name:'张三',
            age:18
        }
    })
    // 定义一个过滤时间的方法
    const filTime = (val)=>{
        console.log(val);
        return dayjs(val).format("YYYY-MM-DD hh-mm-ss")

    }

    // 监听ref类型的数据   watch的第一个参数是你要简单的数据，第二个参数是一个回调函数，回调函数里面有新值和老值
    // watch(num,(newVal,oldVal)=>{
    //     console.log(newVal);
    //      console.log(oldVal);
    // })
    // let a = 1
    // setTimeout(()=>{
    //   a++
    //   console.log(a);
    // },1000)

    // watch(a,(newVal,oldVal)=>{
    //     console.log('a的新值'+newVal);
    //      console.log('a的老值'+oldVal);
    // })
    // 总结： watch 只能监听 ref 或者reactive声明的数据类型，普通的监听不到 也可以监听路由的变化
    // 监听reactive类型的数据
    setTimeout(()=>{
        data.obj.age++
    },1000)
    // watch(()=>data.obj.age,(n,o)=>{
    //     console.log(n);
    //     console.log(o);
    // })
    // // 当我们要监听对象的时候，开启深度监听  watch的第三个参数  {deep:true}
    // watch(()=>data.obj,(n,o)=>{
    //     console.log(n);
    //     console.log(o);
    // },{deep:true})
    // // 监听多个值的变化


    // watch([num,()=>data.obj.age],([newNum,newAge],[oldNum,oldAge])=>{
    //     console.log(newNum,newAge); //新值
    //     console.log(oldNum,oldAge);//老值
    // })


    watchEffect(()=>{
       console.log(num.value);
       console.log(data.obj.age);
    })
//    watchEffect:不需要手动传入依赖值  只要页面数据发生变化 就能触发监听，而且会立即监听

    return {...toRefs(data),filTime,filterTime,num}
  },
  components: {
    // HelloWorld
  }
}
</script>
